feat(Badge): support a contextual help - #3049

Coverage Report for ./packages/components/

🚀 Preview Deployment

Preview environments are ready:

Images:

• docs: ghcr.io/mittwald/flow/docs:pr-3049
• storybook: ghcr.io/mittwald/flow/storybook:pr-3049

Scope: contextual help, not buttons in general

Agreed with Lisa that this extension is not about general button support in a badge — it is about supporting ContextualHelp.

So I would rather reuse the known pattern from ListItem + ContextMenu and move from

<Badge>
  <Label>Priorität</Label>
  <Text>Hoch</Text>
  <ContextualHelpTrigger subject="Priorität">
    <Button />
    <ContextualHelp>
      <Text>Tickets mit hoher Priorität werden zuerst bearbeitet.</Text>
    </ContextualHelp>
  </ContextualHelpTrigger>
</Badge>

to

<Badge>
  <Label>Priorität</Label>
  <Text>Hoch</Text>
  <ContextualHelp>
    <Text>Tickets mit hoher Priorität werden zuerst bearbeitet.</Text>
  </ContextualHelp>
</Badge>

ListItemView already does exactly this for ContextMenu: its props context wraps the menu with the trigger button (wrapWith: <OptionsButton …/>), so the consumer writes only the menu and the item supplies the button.

That API expresses precisely what is supported here: contextual help. Generic Button support does include contextual help, but only that part is wanted — and the API should say so.

Done — the badge now takes a ContextualHelp directly and supplies the trigger button itself, following ListItemView + ContextMenu (props context tunnels the overlay to the slot at the end, wrapWith adds the button):

<Badge>
  <Label>Priorität</Label>
  <Text>Hoch</Text>
  <ContextualHelp>…</ContextualHelp>
</Badge>

Button, CopyButton, Action and ModalTrigger are no longer tunneled, and docs, story, browser and visual tests follow the short form. The visual baselines stayed as they were — the short form renders pixel-identical.

One consequence worth naming: the trigger's subject is no longer reachable, so the button's accessibility label is the generic "More information" rather than "More information about Priorität". ContextualHelpProps (Omit<PopoverProps, "withTip">) has no equivalent, so making it badge-specific would mean extending ContextualHelp itself. Good enough for now, or should we follow up on that?